/*
 * scrollbar style
 */
.vue-scrollbar-transition {
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;

  &--scrollbar {
    transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
  }
}

.vue-scrollbar {
  &__wrapper {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: white;
    max-height: 100%;
    height: 100%;

    &:hover {
      .vue-scrollbar {
        &__scrollbar-vertical, &__scrollbar-horizontal {
          opacity: 1;
        }
      }
    }
  }

  &__scrollbar-vertical, &__scrollbar-horizontal {
    @extend .vue-scrollbar-transition {
      opacity: 0.5;
      position: absolute;
      background: transparent;
    }
    
    /*&:hover {
      background: rgba(0,0,0,0.3);
    }*/

    .scrollbar {
      position: relative;
      background: rgba(0,0,0,0.5);
      cursor: default;
    } 
  }
    

  &__scrollbar-vertical {
    width: 2px;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    background: transparent;

    .scrollbar {
      width: 2px;
    }
  }
   

  &__scrollbar-horizontal {
    height: 2px;
    width: 100%;
    bottom: 0;
    right: 0;

    .scrollbar {
      height: 2px;
    }
  }   
}